<template>
	<view class="goodsDetail">
		<view class="swiperbox">
			<u-swiper
				radius="0"
				:list="info.images"
				@click="clickSwiper"
				:indicatorStyle="{ right: '32rpx', bottom: '24rpx' }"
				:indicator="true"
				indicatorMode="dot"
				indicatorInactiveColor="#cacad1"
				indicatorActiveColor="#9695A3"
				imgMode="heightFix"
				height="750rpx"
				bgColor="#F5F7F9"
			></u-swiper>
		</view>
		<view class="tipbox" v-if="if_miaoSha">
			<image class="bg" src="@/static/images/djsbj.png"></image>
			<view class="lbox">
				<view class="jg">
					原价：
					<text class="jg sc" style="margin-right: 14rpx">{{ info.price_market || 0 }}</text>
					<text class="jg" style="margin-right: 14rpx">单价：{{ userinfo.level === '普通用户' ? info.price_sale : info.price_user }}</text>
				</view>
				<text v-if="info.if_refund">会员价：{{ userinfo.level === '普通用户' ? '?' : info.price_vip }}</text>
			</view>
			<view class="rbox">
				<text>距结束还剩：</text>
				<view class="innerbox">
					<djs :time="msdjs" bgColor="#000000"></djs>
				</view>
			</view>
		</view>
		<view class="container">
			<view class="card card1">
				<view class="title">
					<text class="line-2" user-select>{{ info.title || '' }}</text>
					<text v-if="info.remark" class="remark" user-select>{{ info.remark || '' }}</text>
				</view>
				<view class="row-2">
					<view class="box" v-if="!if_miaoSha">
						<view class="jg normal-jg">
							原价：
							<text class="jg sc" style="margin-right: 14rpx">{{ info.price_market || 0 }}</text>
							<text class="jg" style="margin-right: 14rpx">单价：{{ userinfo.level === '普通用户' ? info.price_sale : info.price_user }}</text>
						</view>
						<text class="jg vip-jg" style="color: #e54e4e" v-if="!!info.if_refund">会员价：{{ userinfo.level === '普通用户' ? '?' : info.price_vip }}</text>
					</view>

					<text class="kc">库存：{{ setKuCun || info.kucun || 0 }}</text>
					<text class="line-1 fk" v-if="info.orders != 0">{{ info.orders || 0 }}+付款</text>
				</view>
			</view>
			<view class="card">
				<view class="formitem">
					<label>物流</label>
					<input type="text" :value="config.com_address" :disabled="true" />
				</view>
				<view class="formitem" @click="show = true">
					<label>选择</label>
					<input v-model="productType.key_vals" type="text" placeholder="选择规格" placeholder-class="plc" :disabled="true" />
					<image src="@/static/images/right.png" mode="aspectFit"></image>
				</view>
				<view class="formitem" @click="yhqpop = true">
					<label>优惠</label>
					<input v-model="checkedItem.title" type="text" placeholder="选择优惠券" placeholder-class="plc" :disabled="true" />
					<image src="@/static/images/right.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="card">
				<view class="headbox">
					<view class="lbox">
						<text>评价</text>
						<text v-if="info.comment_num">({{ info.comment_num }}+)</text>
						<text v-else>( 暂无 )</text>
					</view>
					<view v-if="score" class="rbox" @click="toNav(`goods/goodsPingJia?id=${info.productId}`)">
						<text>好评度</text>
						<text>{{ score }}</text>
						<image src="@/static/images/right.png" mode="aspectFit"></image>
					</view>
				</view>

				<pjlist :list="comment_list"></pjlist>
				<view class="ckqb" v-if="comment_list.length">
					<button @click="toNav(`goods/goodsPingJia?id=${info.productId}`)">查看全部评价</button>
				</view>
			</view>
			<view class="card">
				<view class="headbox">
					<view class="lbox">
						<text>产品简介</text>
					</view>
				</view>

				<view class="u-content">
					<u-parse :lazy-load="true" :content="info.content"></u-parse>
				</view>
			</view>
		</view>
		<u-loading-page :loading="loading" loadingText="加载中" iconSize="32"></u-loading-page>
		<u-popup :show="show" round="16rpx" :closeable="true" @close="show = false">
			<view class="sizebox">
				<view class="goodsbox">
					<image :src="productType.image || info.images[0]" mode=""></image>
					<view class="info">
						<text>{{ info.title || '' }}</text>
						<!-- <text>库存：{{ productType.kucun || info.kucun }}</text> -->
						<view class="box">
							<text>￥{{ productType.price_sale || info.price_sale }}</text>
							<!-- <text v-if="productType.hasOwnProperty('kucun')">库存：{{ productType.kucun }}</text> -->
							<text>{{ productType.key_vals || '' }}</text>
						</view>
					</view>
				</view>

				<view class="typesbox-warp">
					<view :class="['typesbox', { 'flex-between': item.active }]" v-for="(item, index) in info.spec" :key="index">
						<view class="title">{{ item.title || '' }}</view>
						<view class="list">
							<view
								:class="['item', { queHuo: ifkucun(val, index) }, { active: isActive(val, item) }, { two: item.childs.length === 2 && item.title == '款式' }]"
								v-for="(val, i) in item.childs"
								v-if="checkGuigeState(val, item)"
								:key="i"
								@click="setSelectList(val, index, ifkucun(val, index))"
							>
								<u-badge :show="ifkucun(val, index)" :absolute="true" :offset="[-5, -5]" shape="horn" max="99" value="缺货" bgColor="#c6c6c6"></u-badge>
								<text>{{ val.title }}</text>
							</view>
						</view>
					</view>

					<view :class="['typesbox flex-between']">
						<view class="title">数量</view>
						<view>
							<u-number-box v-model="form.num"></u-number-box>
						</view>
					</view>
				</view>

				<!-- <footer-btn buy cart text="立即购买" @submit="submit"></footer-btn> -->
				<footer-btn buy cartBtn cart text="立即购买" @submit="submit"></footer-btn>
			</view>
		</u-popup>
		<yhqpop :goods="true" :yhqList="info.yhq_list" :needPay="needPay" :info="info" :show="yhqpop" @close="yhqpop = false"></yhqpop>
		<footer-btn buy cartBtn cart text="立即购买" @submit="submit"></footer-btn>
	</view>
</template>

<script>
import { updata_car_count, get_userInfo } from '@/common/common_fun.js';
import API from '@/common/api';
import { mapState } from 'vuex';

export default {
	name: 'goodsDetail',
	computed: {
		...mapState(['checkedItem', 'config']),
		ifkucun() {
			return (val, index) => {
				if (this.isky) return false;
				if (this.isnoky) return true;
				let temp = false,
					selectList = this.selectList.filter(Boolean),
					selectLen = selectList.length;
				let key_ids = selectList.map((val) => val.id).join('-');
				if (this.noids.length > 0) {
					for (let key in this.noids) {
						let item = this.noids[key];
						let str = item.replace(`${key_ids}`, '');
						if (str == val.id) {
							temp = true;
							return temp;
						} else if (str == `-${val.id}`) {
							temp = true;
							return temp;
						} else if (str == `${val.id}-`) {
							temp = true;
							return temp;
						} else if (selectLen != this.info.spec.length && selectLen === 2) {
							if (str == `-${selectList[1]}-${val.id}`) {
								temp = true;
								return temp;
							}
							if (str == `-${val.id}-${selectList[2]}`) {
								temp = true;
								return temp;
							}
							if (str == `${val.id}--${selectList[2]}`) {
								temp = true;
								return temp;
							}
							if (str == `${selectList[0]}--${val.id}`) {
								temp = true;
								return temp;
							}
							if (str == `${selectList[0]}-${val.id}-`) {
								temp = true;
								return temp;
							}
							if (str == `${val.id}-${selectList[1]}-`) {
								temp = true;
								return temp;
							}
						} else if (selectLen === this.info.spec.length) {
							let arr = key_ids.split('-'),
								str = '';
							for (let i in arr) {
								if (item.includes(arr[i])) {
									str = item.replace(`${arr[i]}`, '');
									if (str == val.id) {
										temp = true;
										return temp;
									} else if (str == `-${val.id}`) {
										temp = true;
										return temp;
									} else if (str == `${val.id}-`) {
										temp = true;
										return temp;
									} else if (selectLen === 3) {
										if (str == `-${arr[1]}-${val.id}`) {
											temp = true;
											return temp;
										}
										if (str == `-${val.id}-${arr[2]}`) {
											temp = true;
											return temp;
										}
										if (str == `${val.id}--${arr[2]}`) {
											temp = true;
											return temp;
										}
										if (str == `${arr[0]}--${val.id}`) {
											temp = true;
											return temp;
										}
										if (str == `${arr[0]}-${val.id}-`) {
											temp = true;
											return temp;
										}
										if (str == `${val.id}-${arr[1]}-`) {
											temp = true;
											return temp;
										}
									} else {
										temp = false;
									}
								}
							}
						} else {
							temp = false;
						}
					}
					return temp;
				} else {
					return false;
				}
			};
		},
		score() {
			let totalRatings = this.comment_list.length;
			if (!totalRatings) return 0;
			let totalPositiveRatings = this.comment_list.filter((rating) => rating.star >= 4).length;
			let positivePercentage = (totalPositiveRatings / totalRatings) * 100;
			return `${positivePercentage.toFixed(0)}%`;
		},
		isActive() {
			return (val, fitem) => {
				if (val.id) {
					if (this.selectList.filter(Boolean).find((item) => item.id === val.id)) {
						return true;
					} else {
						return false;
					}
				}
			};
		},
		needPay() {
			if (this.info.price_sale) {
				return parseFloat(this.info.price_sale);
			}
			return 0
		},
		setKuCun() {
			if (this.info.inventorys) {
				let kucun = this.info.inventorys.reduce((total, current) => {
					return total + parseFloat(current['kucun']);
				}, 0);
				return kucun;
			} else {
				return '*';
			}
		}
	},
	data() {
		return {
			id: '',
			loading: true,
			show: false,
			yhqpop: false,
			nowIndex: 0,
			tempIndex: 0,
			status: '',
			info: {
				images: []
			},
			productType: {},
			inventoryId: '',
			selectList: [],
			form: {
				num: 1
			},
			comment_list: [],
			comment_total: 0,
			comment_paging: {
				page: 1,
				pagenum: 5
			},
			if_miaoSha: false,
			iferrguige: false,
			msdjs: 0,
			isky: true,
			isnoky: false,
			noids: [],
			userinfo: {},

			//
			idsMap: {}
		};
	},
	onLoad(data) {
		if (data.scene) {
			let str = decodeURIComponent(data.scene);
			let val = str.split('=')[1];
			uni.setStorageSync('invite_id', val);
			console.log('home--invite_id', val);
		} else {
			uni.removeStorageSync('invite_id');
		}
		console.log('goodsDetail--data', data);
		if (data.invite_id) {
			uni.setStorageSync('invite_id', data.invite_id);
			console.log('goodsDetail--invite_id-三个点分享', data.invite_id);
		} else {
			uni.removeStorageSync('invite_id');
		}

		if (data.hasOwnProperty('inventoryId')) {
			this.inventoryId = data.inventoryId;
		}
		if (data.hasOwnProperty('num')) {
			this.form.num = data.num;
		}
		if (data.title) {
			uni.setNavigationBarTitle({
				title: data.title
			});
		}
		this.$store.state.checkedItem = {};
		this.id = data.id || 32779;
		this.init();
		this.$app.$on('update', () => {
			this.init();
		});
	},
	onHide() {
		this.$off('update');
	},
	onUnload() {
		this.$off('update');
	},
	beforeDestroy() {
		this.$off('update');
	},

	onShow() {
		get_userInfo((data) => {
			this.userinfo = data;
		});
	},

	methods: {
		checkGuigeState(sub, item) {
			return true;
			if (!this.iferrguige) {
				let selectList = this.selectList.filter(Boolean);
				let selectItem = selectList.find((v) => v);
				console.log(this.selectList);
				let tempStatus = true;
				if (selectList.length === 1) {
					let ids = selectItem.id + '-' + sub.id;
					let ids2 = sub.id + '-' + selectItem.id;

					// let ids3 = sub.id + '-' + selectItem.id;

					if (sub.id == selectItem.id) {
						return true;
					}
					if (sub.parentId == selectItem.parentId) {
						return true;
					}
					let hasThis = this.info.inventorys.find((v) => v.key_ids == ids || v.key_ids == ids2);
					if (!hasThis) {
						return false;
					}
				}
				return true;
			} else {
				return true;
			}
		},

		getMsTime() {
			API.getJson('product_plist', { if_miaosha: 1, page: 1, pagenum: 1 }).then((res) => {
				const { code, data, message } = res;
				if (data.length > 0) {
					this.msdjs = data[0].cuxiao_time * 1000;
				}
			});
		},
		clickSwiper(e) {
			this.look(this.info.images[e], this.info.images);
		},

		init() {
			this.loading = true;
			API.getJson('product_detail', {
				inventoryId: this.id
			}).then((res) => {
				this.loading = false;
				const { code, data, message } = res;
				if (code === 1) {
					uni.setNavigationBarTitle({
						title: data.title
					});
					
					let len = data.spec.length;
					let num = 0;
					if (len) {
						num = data.spec.reduce((accumulator, currentValue) => accumulator * currentValue.childs.length, 1);
						this.iferrguige = data.inventorys.length != num;
					}

					this.selectList = [];

					if (this.inventoryId) {
						this.productType = data.inventorys.find((item) => item.inventoryId == this.inventoryId) || {};
						this.selectList = this.productType.key_ids.split('-').map((item) => {
							return { id: parseFloat(item) };
						});
					}

					this.isky = data.inventorys.every((val) => val.kucun);
					this.isnoky = data.inventorys.every((val) => !val.kucun);
					if (!this.isky) {
						this.noids = data.inventorys
							.map((val) => {
								if (val.kucun == 0) {
									return val.key_ids;
								}
							})
							.filter(Boolean);
					}

					this.getComments(data.productId);
					data.content.replace(/\<img/gi, "'<img style='display: block;'");
					this.info = data;

					if (data.cuxiao_info.id) {
						this.if_miaoSha = true;
						if (!this.msdjs) this.getMsTime();
					} else {
						this.if_miaoSha = false;
					}
				} else {
					this.j_modal(message, () => {
						this.toBack();
					});
				}
			});
		},

		getComments(productId) {
			API.getJson('product_comments', {
				productId,
				...this.comment_paging
			}).then((res) => {
				const { code, data, message, count } = res;
				if (code === 1) {
					this.comment_total = count;
					if (data.length !== 0) this.comment_list = this.comment_list.concat(data);
					if (this.comment_paging.pagenum === data.length) {
						this.comment_paging.page += 1;
						this.status = 'loadmore';
					} else {
						this.status = 'nomore';
					}
				}
			});
		},
		submit(flag) {
			if (this.info.spec.length === 0) {
				uni.showToast({
					title: '产品异常，请联系管理人员添加规格',
					icon: 'none'
				});
				return;
			}
			if (this.selectList.filter(Boolean).length !== this.info.spec.length) {
				this.show = true;
				uni.showToast({
					title: '请先选择规格',
					icon: 'none'
				});
				return;
			}
			switch (flag) {
				case 1:
					this.addCart();
					break;
				case 2:
					if (this.productType.kucun === 0 || this.form.num > this.productType.kucun) {
						this.msg('该规格库存不足');
						return;
					}
					this.setOrder();
					break;
				default:
					break;
			}
		},

		setOrder() {
			if (this.info.tags.includes('会员限购')) {
				if (this.userinfo.level != '会员用户') {
					this.msg('该商品仅限会员购买');
					return;
				}
			}
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			let product_info = {};
			try {
				product_info = {
					...this.form,
					title: this.info.title,
					image: this.productType.image || this.info.images[0],
					inventoryId: this.productType.inventoryId,
					productId: this.info.productId,
					key_vals: this.productType.key_vals,
					price_sale: this.productType.price_sale,
					if_refund: this.info.if_refund
				};
			} catch (e) {
				//TODO handle the exception
				uni.hideLoading();
				this.msg('产品规格异常');
			}
			uni.setStorageSync('order_info', [product_info]);
			uni.hideLoading();
			this.toNav(`order/qrOrder`);
		},

		addCart() {
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			API.getJson('gouwuche_add', {
				inventoryId: this.productType.inventoryId,
				num: this.form.num
			}).then((res) => {
				uni.hideLoading();
				const { code, data, message } = res;
				if (code === 1) {
					updata_car_count();
					uni.showToast({
						title: message
					});
				}
			});
		},
		findItem() {
			let inventorys = this.info.inventorys;
			let keys = this.selectList.map((item) => item.id).join('-');
			try {
				this.productType = inventorys.find((val) => val.key_ids === keys);
				if (!this.productType) {
					this.productType = {};
					let errID = this.selectList[this.nowIndex].id;
					let msg = this.selectList.map((val) => val.title).join('，');
					this.msg(`当前 ${msg} 规格组合异常，请选择其他`);
					this.selectList.splice(this.nowIndex, 1);
				}
			} catch (e) {}
		},
		setSelectList(val, index, flag) {
			if (flag) return;
			this.nowIndex = index;
			let tempIndex = this.selectList.filter(Boolean).findIndex((item) => item.id === val.id);
			if (tempIndex === -1) {
				this.$set(this.selectList, index, val);
				for (let i = index; i < this.info.spec.length; i++) {
					this.selectList.splice(i + 1, 1);
				}
			} else {
				this.$set(this.selectList, index, '');
			}
			if (this.info.inventorys.length === 0) {
				this.msg('规格异常');
				return;
			}
			if (this.selectList.filter(Boolean).length === this.info.spec.length) this.findItem();
		}
	}
};
</script>

<style lang="less" scoped>
.goodsDetail {
	.sizebox {
		max-height: 100vh;

		padding: 40rpx 32rpx;

		.typesbox-warp {
			overflow: auto;
			max-height: calc(100vh - 80rpx - 168rpx - 168rpx);
		}

		.typesbox + .typesbox {
			border-top: 1px solid #f3f4f8;
		}

		.typesbox {
			padding: 30rpx 0;

			.title {
				padding-bottom: 24rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #000000;
			}

			.list {
				display: flex;
				flex-wrap: wrap;
				.queHuo {
					opacity: 0.85 !important;
					color: #c9c9c9 !important;
				}
				.item {
					position: relative;
					.flex-center();
					min-width: 158rpx;
					padding: 0 20rpx;
					height: 64rpx;
					margin-right: 16rpx;
					margin-bottom: 16rpx;
					background: #f5f7f9;
					border-radius: 40rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
				}

				.two {
					width: 334rpx;
					height: 64rpx;
					background: #f5f7f9;
					border-radius: 40rpx 40rpx 40rpx 40rpx;
				}

				.two:nth-of-type(2n) {
					margin-right: 0 !important;
				}

				.active {
					background: #e54e4e;
					color: #ffffff;
				}

				.item:nth-of-type(4n) {
					margin-right: 0 !important;
				}
			}
		}

		.goodsbox {
			display: flex;
			padding-bottom: 34rpx;
			border-bottom: 1px solid #f3f4f8;

			image {
				width: 168rpx;
				height: 168rpx;
				background: #f8f8f8;
				// flex-shrink: 0;
			}

			.info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 24rpx;
				padding-right: 20rpx;

				text:nth-of-type(1) {
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #000000;
				}

				.box {
					.flex-between();

					text:nth-of-type(1) {
						font-size: 28rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #000000;
					}

					text:nth-of-type(2) {
						font-size: 28rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: 400;
						color: #000000;
					}

					text:nth-of-type(3) {
						font-size: 28rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: 400;
						color: #000000;
					}
				}
			}
		}
	}

	.container {
		padding: 16rpx 32rpx;
		padding: 16rpx 24rpx;

		.u-content {
			padding-top: 24rpx;

			/deep/image {
				display: block;
			}

			/deep/img {
				display: block;
			}
		}

		.ckqb {
			display: flex;
			justify-content: center;

			button {
				margin: 0;
				width: 228rpx;
				height: 56rpx;
				background: #ffffff;
				border-radius: 98rpx 98rpx 98rpx 98rpx;
				border: 2rpx solid #e1e3e8;

				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #9695a3;
			}
		}

		.card + .card {
			margin-top: 16rpx;
		}

		.card {
			min-height: 176rpx;
			padding: 34rpx 24rpx;
			background: #ffffff;
			border-radius: 8rpx 8rpx 8rpx 8rpx;

			.headbox {
				.flex-between();

				& > .lbox {
					text:nth-of-type(1) {
						margin-right: 8rpx;
						font-size: 28rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #000000;
					}

					text:nth-of-type(2) {
						font-size: 20rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #9695a3;
					}
				}

				& > .rbox {
					display: flex;
					align-items: center;

					text:nth-of-type(1) {
						font-size: 20rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #9695a3;
					}

					text:nth-of-type(2) {
						font-size: 20rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
					}

					image {
						width: 13rpx;
						height: 24rpx;
						margin-left: 16rpx;
					}
				}
			}

			.formitem + .formitem {
				padding-top: 28rpx;
			}

			.formitem {
				display: flex;
				align-items: center;

				label {
					width: 88rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #000000;
				}

				input {
					flex: 1;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
				}

				.plc {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #9695a3;
				}

				image {
					width: 13rpx;
					height: 24rpx;
				}
			}
		}

		.card1 {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.title {
				& > text:nth-of-type(1) {
					flex: 1;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
				}

				.remark {
					margin-top: 14rpx;
					width: 100%;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
				}
			}

			.kc {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
			}

			.fk {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #9695a3;
			}

			.row-2 {
				margin-top: 14rpx;
				.flex-between();
				align-items: flex-end;
				.box {
					display: flex;
					flex-direction: column;
					// margin-bottom: 5rpx;
					.normal-jg{
					}
					.vip-jg{
					}
					.jg + .jg {
						margin-top: 8rpx;
					}
					.jg {
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: bold;
						color: #000000;
					}
				}
			}
		}
	}

	.tipbox {
		position: relative;
		// position: sticky;
		// top: 0;
		display: flex;
		justify-content: space-between;
		z-index: 1;
		width: 750rpx;
		height: 130rpx;
		padding: 22rpx 32rpx;

		.lbox {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.jg {
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #ffffff;
				// &:before {
				// 	content: '￥';
				// 	font-size: 24rpx;
				// 	font-family: PingFang SC-Bold, PingFang SC;
				// 	font-weight: bold;
				// 	color: #ffffff;
				// }
			}
			text {
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #ffffff;
				// &:before {
				// 	content: '￥';
				// 	font-size: 24rpx;
				// 	font-family: PingFang SC-Medium, PingFang SC;
				// 	font-weight: 500;
				// 	color: #ffffff;
				// }
			}
		}

		.rbox {
			// flex: 1;
			text-align: right;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			& > text:nth-of-type(1) {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
			}

			.innerbox {
				display: flex;
				justify-content: flex-end;
			}
		}

		.bg {
			position: absolute;
			z-index: -1;
			top: 0;
			left: 0;
			width: 750rpx;
			height: 130rpx;
		}
	}
}
</style>
